<template>
	<view>
		<view class="top--day">
			<uni-datetime-picker v-model="range" type="daterange" :disabled="true"/>
		</view>
		<uni-section v-if="type == 'goods' "type="line" title="商品销量排行">
			<uni-list border-full>
				<uni-list-item
					v-for="(item, index) in list"
					:key="index"
					showExtraIcon
					:extraIcon="{color: '#00aaff',size: '22',type: 'gift-filled'}"
					:title="item.goodsName" 
					:note="`规格：${item.goodsWeight}g`" 
					:rightText="`¥${item.salesCount}`"
				/>
				<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="list.length > pageSize"></uni-load-more>
			</uni-list>
		</uni-section>
		<uni-section v-else type="line" title="设备销量排行">
			<uni-list border-full>
				<uni-list-item
					v-for="(item, index) in list"
					:key="index"
					showExtraIcon 
					:extraIcon="{color: '#00aaff',size: '22',type: 'shop-filled'}"
					:title="item.machineName" 
					:note="item.machinePlace" 
					:rightText="`¥${item.saleAmount}`"
				/>
				<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="list.length > pageSize"></uni-load-more>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				range: [],
				list: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				pageNo: 1,
				pageSize: 15
			}
		},
		
		onLoad(options) {
			let { startDay, endDay, type }  = options
			this.type = type
			this.range = [ startDay , endDay ]
			
			this.initData()
		},
		
		onReachBottom() {
			if(this.status === 'more') {
				this.status = 'loading';
				this.initData();
			}
		},
		
		methods: {
			initData() {
				if(this.type == 'goods') {
					this.getGoodsTop()
				} else {
					this.getMachineTop()
				}
			},
			
			getMachineTop() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/machineSellCountOrder',
					data: {
						merchantId: uni.getStorageSync('mid'),
						startDate: this.range[0],
						endDate: this.range[1],
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.list.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								list: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			getGoodsTop() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/goodsSaleCountOrder',
					data: {
						merchantId: uni.getStorageSync('mid'),
						startDate: this.range[0],
						endDate: this.range[1],
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.list.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								list: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.top--day {
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}
	
	
	.list-body {
		height: calc( 100vh - 120rpx );
	}
</style>